這個章節會從我們前面常常使用的 Typography 開始講解。

Typography

他是一個整合文字的 tag，一次過多的字體大小和样式會破壞任何佈局。排版比例具有一組有限的字體大小，可以與佈局網格很好地配合使用，由於前面的章節已經講解過了，我這邊就不再贅述，詳見官方文件。

Avatar

這就是一個快速生成頭像的組件。

Image avatars

可以通過將標準 img props src 或 srcSet 傳遞給組件來創建圖像頭像。

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

Letter avatars

可以通過將字符串作為子項傳遞來創建包含簡單字符的頭像。

<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>

Icon avatars

圖標頭像是通過將圖標作為子項傳遞來創建的。

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
  <PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
  <AssignmentIcon />
</Avatar>

Variants

透過修改 variants 屬性可以以圓形以外的形狀來顯示頭像。

<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
  <AssignmentIcon />
</Avatar>

Grouped

AvatarGroup 可以以多個頭像堆疊的方式呈現。

<AvatarGroup max={4}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

With badge

可以透過 badge 的方式顯示使用者的狀態，關於 badge 組件的用法後面還會再提及。

<Badge
  overlap="circular"
  anchorOrigin={{
    vertical: 'bottom',
    horizontal: 'right',
  }}
  badgeContent={<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
>
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</Badge>

Badge

Badge 會在其子項的角洛區生成一個圖示用於區分使用者的狀態。
基本應用 color 屬性與 Button 一樣，badgeContent 的部分也可以塞其他組件。

<Badge badgeContent={4} color="primary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="secondary">
  <MailIcon />
</Badge>
<Badge badgeContent={4} color="error">
  <MailIcon />
</Badge>

另外如果傳入 badgeContent 的數值為零的話，預設值為不顯示，如果要顯示的話要下 showZero。

<Badge color="secondary" badgeContent={0}>
  <MailIcon />
</Badge>
<Badge color="secondary" badgeContent={0} showZero>
  <MailIcon />
</Badge>

Maximum value

可以透過 max 屬性來設定顯示的最大值，預設值為 99。

<Badge badgeContent={99} {...defaultProps} />
<Badge badgeContent={100} {...defaultProps} />
<Badge badgeContent={1000} max={999} {...defaultProps} />

Dot

dot 屬性將徽章更改為小圓點。這可以用作通知某些內容已更改而不提供計數。

<Badge color="secondary" variant="dot">
  <MailIcon />
</Badge>
<Badge color="secondary" variant="dot">
  <Typography>飛向宇宙</Typography>
</Badge>

alignment

您可以使用 anchorOrigin 來調整任何角落顯示內容。

<Badge
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
>
L
</Badge>

Chip

這個組件和 bootstrap 的 pills 是一樣的意思，都是 border-radius: 50px，用法跟上述的 badge 很像。

<div>
  <Chip label="Basic" />
  <Chip label="Disabled" disabled />
  <Chip avatar={<Avatar>M</Avatar>} label="Clickable" onClick={handleClick} />
  <Chip
    avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
    label="Deletable"
    onDelete={handleDelete}
  />
  <Chip
    icon={<FaceIcon />}
    label="Clickable deletable"
    onClick={handleClick}
    onDelete={handleDelete}
  />
  <Chip
    label="Custom delete icon"
    onClick={handleClick}
    onDelete={handleDelete}
    deleteIcon={<DoneIcon />}
  />
  <Chip label="Clickable Link" component="a" href="#chip" clickable />
  <Chip
    avatar={<Avatar>M</Avatar>}
    label="Primary clickable"
    clickable
    color="primary"
    onDelete={handleDelete}
    deleteIcon={<DoneIcon />}
  />
  <Chip
    icon={<FaceIcon />}
    label="Primary clickable"
    clickable
    color="primary"
    onDelete={handleDelete}
    deleteIcon={<DoneIcon />}
  />
  <Chip label="Deletable primary" onDelete={handleDelete} color="primary" />
  <Chip
    icon={<FaceIcon />}
    label="Deletable secondary"
    onDelete={handleDelete}
    color="secondary"
  />
</div>

他也可以透過 variant="outlined"，來設定只有框線的效果。

<Chip label="Basic" variant="outlined" />

其他應用的話強烈建議進官方文件玩玩看。

那麼今天的內容就講到這，明天會接續講完其他剩餘的內容，table 的部分可能會用其他比較好用的套件來講解。